<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>门票购买</h2>
        <p>选择您想要购买的门票类型及数量</p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  购买数量：
              </div>
              <div class="sales-board-line-right">
                <v-counter @on-change="onParamChange('buyNum', $event)"></v-counter>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品类型：
              </div>
              <div class="sales-board-line-right">
                  <v-selection :selections="buyTypes" @on-change="onParamChange('buyType', $event)"></v-selection>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  日期：
              </div>
              <div class="sales-board-line-right">
                  <v-chooser
                  :selections="periodList"
                  @on-change="onParamChange('period', $event)"></v-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品版本：
              </div>
              <div class="sales-board-line-right">
                  <v-mul-chooser
                  :selections="versionList"
                  @on-change="onParamChange('versions', $event)"></v-mul-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  {{ price }} 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button" @click="showPayDialog">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>友情提示</h2>
        
        <p>1、产品内容随淡旺季变化调整较为频繁，网页中的产品介绍、行程安排、价格构成等相关信息仅供参考所用，最终产品内容请以签 约合同为准。</p>
        <p>2、黄金周、特殊节日等旅游旺季，房间预订以款到确认为准，一经确认不得随意变更。</p>
        <p>3、旅行社会根据具体情况对行程景点及住宿地点先后顺序作出调整，但不影响原定标准及数量。</p>
        <p>4、根据国家法律规定，为确保您的游程顺利，请随身携带并自行保管好您的有效身份证明，并在报名时务必确认所报姓名与身份证 件完全一致无 误，以免
        造成不必要损失，如因客人自身原因造成损失，一切损失需客人自负。成人务请携带有效身份证件、18周岁以下小孩带户口本方可 乘机（均需原件）；请各位游
        客按照约定标准（如身高、年龄）为儿童报名，如因虚报、隐瞒产生的一切后果敬请自负，由此产生的相关损失也将由游客承担。</p>
        <p>5、为了不耽误您的行程，请您在国际航班起飞前120分钟到达机场办理登机＆出入境相关手续。</p>
        <p>6、根据中国海关总署颁布的2010年54号令，进境公民旅客携带在境外获取的个人自用进境物品总值在5000元以内（含5000元）的，海关予以免税放行。烟草
        制品、酒精制品、照相机、摄像机等20种商品不在免税范围内，敬请知晓。</p>
        <p>7、根据最新发布的《中华人民共和国禁止携带、邮寄进境的动植物及其产品和其他检疫物名录》，将燕窝、新鲜水果、蔬菜、动物源性中药材、转基因生物材
        料等列入严禁携带或邮寄进境项目，敬请知晓。</p>
        <p>8、请您严格遵守境外旅游目的地有关国家法律法规，切勿从事象牙等濒危野生动植物及其制品交易或携带相关物品，避免因触犯法律损害自身利益。</p>
        <p>9、根据国家相关法规，若因人力不可抗拒的因素而造成对行程的影响，将协助游客进行解决，但不承担相应损失，若因此而增加的 费用，敬请游 客自己承担。</p>
        <p>10、行程中须遵守景区、酒店、机场等场所规章制度，对于其设施设备应予以爱护，如有损坏，客人自行照价赔偿。</p>
        <p>11、旅游者应身体健康，确保自身身体条件能够顺利完成旅游活动，避免因自身疾病在旅途中引起不良后果。请根据自己的身体条件参加适宜的旅游活动，以免
        发生意外。</p>
        <p>12、游客在全程旅游或自由活动时请注意安全，请尽量避免单独出行；同行人员、导游的手机、房间号以及自己下榻的酒店名称位置 请务必记住。 请妥善保管
        自己的证件、钱币以及其他等贵重物品，随身不要佩戴贵重首饰或大量现金。不得进入设有警示标志的危险区域，进行游览、拍照 等活动。</p>
        <p>13、出游时请尽量穿运动鞋，平底鞋（最好不要穿新皮鞋，高跟鞋，硬底鞋，拖鞋）。建议女同胞们不要穿裙子，尽量穿裤装，景区内许多游玩项目不适宜穿裙
        游玩。</p>
        
        <h3>服务热线</h3>
        4008-208-820
      </div>
      <Vdialog :is-show="isShowPayDialog" @on-close="hidePayDialog">
        <table class="buy-dialog-table">
          <tr>
            <th>购买数量</th>
            <th>产品类型</th>
            <th>日期</th>
            <th>产品版本</th>
            <th>总价</th>
          </tr>
          <tr>
            <td>{{ buyNum }}</td>
            <td>{{ buyType.label }}</td>
            <td>{{ period.label }}</td>
            <td>
              <span v-for="item in versions">{{ item.label }}</span>
            </td>
            <td>{{ price }}</td>
          </tr>
        </table>
        <h3 class="buy-dialog-title">请选择银行</h3>
        <bank-chooser @on-change="onChangeBanks"></bank-chooser>
        <div class="button buy-dialog-btn" @click="confirmBuy">
          确认购买
        </div>
      </Vdialog>
      <Vdialog :is-show="isShowErrDialog" @on-close="hideErrDialog">
        支付失败！
      </Vdialog>
      <check-order :is-show-check-dialog="isShowCheckOrder" :order-id="orderId" @on-close-check-dialog="hideCheckOrder"></check-order>
  </div>
</template>

<script>
import VSelection from '../base/selection'
import VCounter from '../base/counter'
import VChooser from '../base/chooser'
import VMulChooser from '../base/multiplyChooser'
import Vdialog from '../base/Vdialog'

import BankChooser from '../bankChooser'
import CheckOrder from '../checkOrder'
import _ from 'lodash'

export default {
  components: {
    VSelection,
    VCounter,
    VChooser,
    VMulChooser,
    Vdialog,
    BankChooser,
    CheckOrder
  },
  data () {
    return {
      buyNum: 0,
      buyType: {},
      versions: [],
      period: {},
      price: 0,
      versionList: [
        {
          label: '成人票',
          value: 0
        },
        {
          label: '儿童票',
          value: 1
        },
        {
          label: '团购票',
          value: 2
        }
      ],
      periodList: [
        {
          label: '1月1日',
          value: 0
        },
        {
          label: '1月2日',
          value: 1
        },
        {
          label: '1月3日',
          value: 2
        }
      ],
      buyTypes: [
        {
          label: '雁荡山一日游',
          value: 0
        },
        {
          label: '楠溪江三天两夜',
          value: 1
        },
        {
          label: '刘伯温故里',
          value: 2
        },
        {
          label: '泽雅风景区一日游',
          value: 3
        },
        {
          label: '百丈漈飞云湖景区',
          value: 4
        },
        {
          label: '碗窑古村落',
          value: 5
        },
        {
          label: '苍南渔寮景区',
          value: 6
        },
        {
          label: '泰顺氡泉景区',
          value: 7
        },
        {
          label: '铁定溜溜景区',
          value: 8
        }
      ],
      isShowPayDialog: false,
      bankId: null,
      orderId: null,
      isShowCheckOrder: false,
      isShowErrDialog: false
    }
  },
  methods: {
    onParamChange (attr, val) {
      this[attr] = val
      this.getPrice()
    },
    getPrice () {
      let buyVersionsArray = _.map(this.versions, (item) => {
        return item.value
      })
      let reqParams = {
        buyNumber: this.buyNum,
        buyType: this.buyType.value,
        period: this.period.value,
        version: buyVersionsArray.join(',')
      }
      this.$http.post('/api/getPrice', reqParams)
      .then((res) => {
        this.price = res.data.amount
      })
    },
    showPayDialog () {
      this.isShowPayDialog = true
    },
    hidePayDialog () {
      this.isShowPayDialog = false
    },
    hideErrDialog () {
      this.isShowErrDialog = false
    },
    hideCheckOrder () {
      this.isShowCheckOrder = false
    },
    onChangeBanks (bankObj) {
      this.bankId = bankObj.id
    },
    confirmBuy () {
      let buyVersionsArray = _.map(this.versions, (item) => {
        return item.value
      })
      let reqParams = {
        buyNumber: this.buyNum,
        buyType: this.buyType.value,
        period: this.period.value,
        version: buyVersionsArray.join(','),
        bankId: this.bankId
      }
      this.$http.post('/api/createOrder', reqParams).then((res) => {
        this.orderId = res.data.orderId
        this.isShowCheckOrder = true
        this.isShowPayDialog = false
      }, (err) => {
        console.log(err)
        this.isShowBuyDialog = false
        this.isShowErrDialog = true
      })
    }
  },
  mounted () {
    this.buyNum = 1
    this.buyType = this.buyTypes[0]
    this.versions = [this.versionList[0]]
    this.period = this.periodList[0]
    this.getPrice()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.buy-dialog-title {
  font-size: 16px;
  font-weight: bold;
}
.buy-dialog-btn {
  margin-top: 20px;
}
.buy-dialog-table {
  width: 100%;
  margin-bottom: 20px;
}
.buy-dialog-table td,
.buy-dialog-table th{
  border: 1px solid #e3e3e3;
  text-align: center;
  padding: 5px 0;
}
.buy-dialog-table th {
  background: #4fc08d;
  color: #fff;
  border: 1px solid #4fc08d;
}
</style>
